<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>众包首页</title>
<link rel="stylesheet" type="text/css"
	href="/crowd-sourcing/static/bootstart/css/bootstrap.min.css" />
	
<link rel="stylesheet" type="text/css"
	href="/crowd-sourcing/static/css/lun.css" />
<style>
body {
	margin: 0;
	padding: 0;
	background-color: cornflowerblue;
}

.container {
	background-image: url(/crowd-sourcing/img/bg.png);
	background-size: 100%;
}
#wei{
background-image: url(/crowd-sourcing/img/bg.png);
	background-size: 100%;
}
#tou {
	background-image: url(/crowd-sourcing/img/327730.jpg);
	width: 100%;
	height: 600px;
	background-size: 100% 100%;
}

#a1 {
	position: absolute;
	margin-left: 900px;
	color: black;
	top: 100px;
	font-size: 40px;
}

#a2 {
	position: absolute;
	margin-left: 500px;
	color: red;
	top: 50px;
	font-size: 40px;
	margin-top: 180px;
}

.row {
	height: 300px;
}

.col-lg-8 {
	height: 300px;
}

.col-lg-4 {
	height: 300px;
}

#y {
	background-image: url(/crowd-sourcing/img/sd.jpg);
	width: 100%;
	height: 30px;
	text-align: center;
}


#b1 {
	color: red;
	font-size: 40px;
}

#b3 {
	align-content: center;
}

.y1 {
	color: "red";
	font-size: 20px;
}

#ad {
	display: none;
}
#fd {
	display: none;
}
#gd {
	display: none;
}

.btn-success {
	width: 120px;
}

#myBtn {
	display: none; /* 默认隐藏 */
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: red; /* 设置背景颜色，你可以设置自己想要的颜色或图片 */
	color: white; /* 文本颜色 */
	cursor: pointer;
	padding: 15px;
	border-radius: 10px; /* 圆角 */
}

#myBtn:hover {
	background-color: #555;
}
.xiangxi{
position: absolute;
background-image: url(/crowd-sourcing/img/bg.png);
               
background-size: 100%;
   width:600px;
   height: 620px;
    margin-left: 310px;
    margin-top: -181px;
    display: none;
    text-align: center;
}
#s1{
 color:red;
}
#s2{
 color:red;
}
#s3{
 color:red;
}
#s4{
 color:red;
}
#s5{
 color:red;
}
#wei{
  text-align: center;
}
</style>
</head>

<body>
	<div id="tou">
		<a href="/crowd-sourcing/about.jsp" id="a1">关于竞赛频道</a> <a
			href="/crowd-sourcing/Release.jsp" id="a2">我来举办比赛</a>

	</div>
	<div class="container">
	
	
    
	
	<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
		<div class="one row">
			<div class="col-lg-8">
				<div id="ads">
					<img src="/crowd-sourcing/img/1.jpg" alt="" class="show" /> <img
						src="/crowd-sourcing/img/2.jpg" /> <img
						src="/crowd-sourcing/img/3.jpg" /> <img
						src="/crowd-sourcing/img/4.jpg" /> <img
						src="/crowd-sourcing/img/5.jpg" /> <img
						src="/crowd-sourcing/img/6.jpg" />
					<ul>
						<li class="active"></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>

			<div class="col-lg-4">
				<div id="y">
					<span class="y1">个人中心</span>
				</div>
				<div id="yt">
					<img src="/crowd-sourcing/img/img128.jpg"><span id="name"></span>
					<span>欢迎来到竞赛频道</span>
				</div>

				<button type="button" class="btn btn-success"
					onclick="window.location.href='/crowd-sourcing/logou.jsp'">退出登录</button>
				<button type="button" class="btn btn-success"
					onclick="window.location.href='/crowd-sourcing/myzuo.jsp'">我的作品</button>
			</div>

		</div>
		<div class="row">
		<div class="xiangxi">
		<button onclick="Addclose()">✖️</button>
		<h3>大赛名称:</h3><h3 id="s1"></h3>
		<h3>大赛奖金:</h3><h3 id="s2"></h3>
		<h3>大赛宗旨:</h3><h3 id="s3"></h3>
		<h3>参赛形式:</h3><h3 id="s4"></h3>
		<h3>参赛规则:</h3><h3 id="s5"></h3>
		</div>
		
		
		</div>
		
	</div>
	<div id="wei">版权所有： 重庆商务职业学院限公司 © <br>2011.8 all rights reserved. <br>备案证号： 渝ICP备11056167号-5</div>
	<script type="text/javascript"
		src="/crowd-sourcing/static/js/jquery-3.4.1.js"></script>
	<script>
		$(function() {
			all();

			var timer;
			var cur = 0;
			var len = $("#ads li").length;
			function showlmg() {
				timer = setInterval(function() {
					cur++;
					if (cur >= len) {
						cur = 0;
					}
					$("#ads img").eq(cur).fadeIn(1000).siblings("img").fadeOut(
							1000);
					$("#ads li").eq(cur).addClass("active").siblings("li")
							.removeClass("active");
				}, 2000);
			}
			showlmg();
		})
		$(function() {
			$('#name').text(sessionStorage.getItem("list"));
		});

		function all() {
			$
					.ajax({
						type : "post",
						url : "gou",
						data : {
							"opo" : "a"
						},
						success : function(data) {
                           console.log(data)
							var json = JSON.parse(data);

							var d = ""
							for (var i = 0; i < json.length; i++) {
								d += "<div class='col-lg-3'><div id='b1'>奖金:"
										+ json[i].bonus
										+ "</div><div><img src='/crowd-sourcing/img/66.jpg'></div><div id='b3'><div id='s'>"
										+ json[i].name
										+ "</div><button type='button' class='btn btn-primary' onclick='ad()'>参赛</button><button type='button' class='btn btn-primary' onclick='sd(this)'>详细</button></div><div id='ad'><span>"
										+ json[i].purpose+ "</span></div><div id='fd'><span>"
										+ json[i].form + "</span></div><div id='gd'><span>"
										+ json[i].rule + "</span></div></div>"
							}

							$(".one").append(d);
						}
					})
		}

		function ad() {
			window.location.href = "upload.jsp";
		}
		
		window.onscroll = function() {scrollFunction()};
		 
		function scrollFunction() {console.log(121);
		    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
		        document.getElementById("myBtn").style.display = "block";
		    } else {
		        document.getElementById("myBtn").style.display = "none";
		    }
		}
		 
		// 点击按钮，返回顶部
		function topFunction() {
		    document.body.scrollTop = 0;
		    document.documentElement.scrollTop = 0;
		}
		function sd(btn){
			
			$(".xiangxi").fadeIn(1);
			 var name=btn.parentNode.parentNode.children[2].innerText;
			var id=btn.parentNode.parentNode.children[0].innerText;
			var z=btn.parentNode.parentNode.children[3].innerText;
			var x=btn.parentNode.parentNode.children[4].innerText;
			var g=btn.parentNode.parentNode.children[5].innerText;
			console.log(g);
			$("#s1").text(name);
			$("#s2").text(id);
			$("#s3").text(z);
			$("#s4").text(x);
			$("#s5").text(g); 
		}
		function Addclose() {
			$(".xiangxi").fadeOut();

		}
	</script>
</body>

</html>